<template>
  <div>
    <ul class="chapterList">
      <el-button type="text" @click="dialogFormVisible1 = true">添加</el-button>
      <li v-for="combined in combineds">
        <p>
          {{ combined.comName }} : {{ combined.type }}

          <span class="acts">
			  <router-link :to="'/home/insuranceManage/' + combined.id">
			    <el-button type="text" v-if="combined.state === 1">保险管理</el-button>
			  </router-link>&nbsp;
            <el-button type="text" v-if="combined.state === 0" @click="editCombined(combined)"
              >修改</el-button
            >
            <el-button type="text" v-if="combined.state === 0" @click="dialogaddGuarantee(combined.id)"
              >添加保障</el-button
            >
            <el-button type="text" v-if="combined.state === 0" @click="dialogdelCombined(combined.id)"
              >删除</el-button
            >
			<el-button type="text" v-if="combined.state === 0" @click="releaseCombined(combined.id)"
			  >发布</el-button
			>
          </span>
        </p>
        <ul class="chapterList videoList">
          <li v-for="gua in combined.guarantees">
            <p>
              {{ gua.context }}
              <span class="acts" v-if="combined.state === 0">
                <el-button type="text" @click="editGuarantee(gua)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="dialogdelGuarantee(gua.guaranteeId)"
                  >删除</el-button
                >
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <el-dialog
      title="保障内容"
      :visible.sync="dialogFormVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="guarantee">
        <el-form-item label="保障名称" :label-width="formLabelWidth">
          <el-input v-model="guarantee.context" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGuarantee()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="套餐内容"
      :visible.sync="dialogFormVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="combined">
        <el-form-item label="套餐名称" :label-width="formLabelWidth">
          <el-input v-model="combined.comName" autocomplete="off"></el-input>
        </el-form-item>
		<el-form-item label="套餐期限" :label-width="formLabelWidth">
		  <el-input v-model="combined.comTime" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="套餐类型" :label-width="formLabelWidth">
		  <el-input v-model="combined.type" autocomplete="off"></el-input>
		</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addCombined()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="是否删除"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">否</el-button>
        <el-button type="primary" @click="deleteCombined()">是</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="是否删除"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">否</el-button>
        <el-button type="primary" @click="deleteGuarantee()">是</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dfv: true,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      combinedId: null,
      guaranteeId: null,
      guarantee: {
        id: null,
        combinedId: null,
        context: null,
      },
      combined: {
        id: null,
        comName: null,
		comTime: null,
		type: null,
      },
      combineds: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const vm = this;
      this.axios({
        method: "get",
        url: "http://localhost:8081/admin/combined/list",
      })
        .then((response) => {
          console.log("获取数据成功", response);
          vm.combineds = response.data.content;
        })
        .catch((error) => {
          console.log("获取数据失败", error);
        });
    },
	dialogaddGuarantee(combinedId) {
	  this.guarantee.combinedId = combinedId;
	  this.dialogFormVisible = true;
	},
    dialogdelGuarantee(guaranteeId) {
      this.guaranteeId = guaranteeId;
      this.dialogVisible2 = true;
    },
    dialogdelCombined(combinedId) {
      this.combinedId = combinedId;
      this.dialogVisible1 = true;
    },
    deleteGuarantee() {
      this.dialogVisible2 = false;
      const vm = this;
      this.axios({
        method: "get",
        url: "http://localhost:8081/admin/guarantee/delete/" + this.guaranteeId,
      })
        .then((response) => {
          console.log("获取数据成功", response);
          vm.combineds = response.data.content;
        })
        .catch((error) => {
          console.log("获取数据失败", error);
        });
    },
    deleteCombined() {
      this.dialogVisible1 = false;
      const vm = this;
      this.axios({
        method: "get",
        url: "http://localhost:8081/admin/combined/delete/" + this.combinedId,
      })
        .then((response) => {
          console.log("获取数据成功", response);
          vm.combineds = response.data.content;
        })
        .catch((error) => {
          console.log("获取数据失败", error);
        });
    },
    editGuarantee(guarantee) {
      this.guarantee = guarantee;
      this.dialogFormVisible = true;
    },
    addGuarantee() {
      this.dialogFormVisible = false;
      const vm = this;
      this.axios({
        method: "post",
        url: "http://localhost:8081/admin/guarantee/add",
        data: this.guarantee,
      })
        .then((response) => {
          console.log("获取数据成功", response);
          vm.combineds = response.data.content;
        })
        .catch((error) => {
          console.log("获取数据失败", error);
        });
    },
    editCombined(combined) {
      this.combined = combined;
      this.dialogFormVisible1 = true;
    },
    addCombined() {
      this.dialogFormVisible1 = false;
      const vm = this;
      this.axios({
        method: "post",
        url: "http://localhost:8081/admin/combined/add",
        data: this.combined,
      })
        .then((response) => {
          console.log("获取数据成功", response);
          vm.combineds = response.data.content;
        })
        .catch((error) => {
          console.log("获取数据失败", error);
        });
    },
	releaseCombined(combinedId){
		const vm = this;
		this.axios({
		  method: "get",
		  url: "http://localhost:8081/admin/combined/release/" + combinedId,
		})
		  .then((response) => {
		    console.log("获取数据成功", response);
		    vm.combineds = response.data.content;
		  })
		  .catch((error) => {
		    console.log("获取数据失败", error);
		  });
	}
  },
};
</script>

<style scoped>
.chapterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chapterList li {
  position: relative;
}
.chapterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chapterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
